<!--
el-table-pro
该组件是在el-table的基础上封装而来
第一次封装（简易封装）：
  columnsConfig：数组，设定table的所有数据列，支持el-table-column所有属性
    写法：{ prop: 'created_program', label: '更新程序', 'min-width': 150, 'show-overflow-tooltip': true }，存在“-”的属性需要使用字符串的方式，例如'min-width'
  data：table需要显示的数据
  loading：数据加载效果控制
  动态计算el-table高度，需要使用class为query-container的div将查询条件表单包裹，需要使用class为tool-container的div将tool包裹
-->
<template>
  <el-table
    ref="dataTable"
    v-loading="loading"
    v-bind="$attrs"
    :data="data"
    :border="border"
    :height="tableHeight"
    @sort-change="sortChange"
  >
    <!-- 使用 v-for 循环渲染列，同时使用 v-bind="column" 动态绑定所有属性 -->
    <el-table-column
      v-for="column in filteredColumnsConfig"
      :key="column.prop"
      v-bind="column"
    />
    <!-- 使用插槽分发传递给 ElTablePro 的任何额外列 -->
    <slot />
  </el-table>
</template>

<script>
import resizeElTableHeightMixin from '@/mixins/ResizeElTableHeightMixin'
export default {
  name: 'ElTablePro',
  mixins: [resizeElTableHeightMixin],
  props: {
    data: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: true
    },
    columnsConfig: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      tableHeight: undefined
    }
  },
  computed: {
    // 计算属性用于过滤 columnsConfig
    filteredColumnsConfig() {
      return this.columnsConfig.filter(column => {
        // 在这里实现过滤逻辑
        // 例如，根据某个条件决定 column 是否应该显示
        return this.shouldDisplayColumn(column);
      });
    }
  },
  methods: {
    shouldDisplayColumn(column) {
      if ('show' in column) {
        return column.show
      }
      return true
    },
    /** 处理列表排序 */
    sortChange(sort) {
      this.$emit('sort', sort)
    }
  }
};
</script>
